<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org"
	xmlns:dt="http://github.com/dandelion/datatables"
	xmlns:sec="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Edit Use Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="Dhrubo" />

<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

@media ( max-width : 980px) {
	/* Enable use of floated navbar text */
	.navbar-text.pull-right {
		float: none;
		padding-left: 5px;
		padding-right: 5px;
	}
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/tablecloth.css" rel="stylesheet" />
<link href="css/bootstrap-editable.css" rel="stylesheet" />
<script src="js/jquery.js"></script>


<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->


<link type="text/css" rel="stylesheet" href="css/jquery.tocify.css" />



</head>

<body>

	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<button type="button" class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="brand" href="#" style="color: yellow; font-weight: bold">Req1</a>
				<div class="nav-collapse collapse">

					<ul class="nav">
						<li><a href="home">Home</a></li>

						<li class="dropdown active"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown">Use Cases <b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newusecase">New</a></li>
								<li><a href="listusecases">View All</a></li>

							</ul></li>

						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Projects <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newproject">New</a></li>
								<li><a href="listprojects">View All</a></li>

							</ul></li>


						<li class="dropdown pull-right"
							sec:authorize="hasRole('ROLE_COMPANY_ADMIN')"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown">Users <b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newuser">New</a></li>
								<li><a href="listusers">View All</a></li>

							</ul></li>


						<li class="dropdown pull-right"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown">Tickets <b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newproject">New</a></li>
								<li><a href="viewallprojects">View All</a></li>

							</ul></li>

						<li><a href="#about">Help</a></li>
						<li><a href="#contact">Contact</a></li>


					</ul>


					<div class="pull-right">
						<ul class="nav pull-right">
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								th:text="'Hi! ' + ${#authentication.name}"
								data-toggle="dropdown">Welcome, User <b class="caret"></b></a>
								<ul class="dropdown-menu">
									<li><a href="/user/preferences"><i class="icon-cog"></i>
											Preferences</a></li>
									<li><a href="/help/support"><i class="icon-envelope"></i>
											Contact Support</a></li>
									<li class="divider"></li>
									<li><a href="/auth/logout"><i class="icon-off"></i>
											Logout</a></li>
								</ul></li>
						</ul>
					</div>




				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div class="container-fluid">

		<div class="row-fluid">
			<div class="span6">
				<ul class="breadcrumb">
					<li><a href="home">Home</a> <span class="divider">/</span></li>
					<li><a href="listusecases">List Use Cases</a> <span
						class="divider">/</span></li>
					<li class="active" th:text="'View Use Case : ' + ${useCase.name}"></li>
				</ul>
			</div>
			<div class="span6">
				<div class="btn-group pull-right">
					<button class="btn btn-primary" type="button">Print</button>
					<button class="btn btn-success" type="button">Request
						Review</button>
					<button class="btn btn-danger" type="button">
						Delete
					</button>
					<a href="details.html" th:href="@{/editusecase(usecase=${useCase.id})}" class="btn btn-warning" >Edit</a>

					<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
						Export <span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#">As Microsoft Word</a></li>
						<li><a href="#">As Adobe PDF</a></li>
						<li><a href="#">As LibreOffice Writer</a></li>
					</ul>
				</div>
			</div>
		</div>

		<div class="row-fluid">



			<div class="span9">

				<h1 th:text="'Use Case : '+ ${useCase.name}"></h1>

				<h2>Identification</h2>



				<h2>Actors</h2>

				<h2>Main Flow</h2>


				<div th:each="s, row : ${useCase.mainFlow.steps}">


					<p class="text-info well"
						th:text="${row.count} + '. ' +${s.description}"
						style="font-size: large;"></p>





				</div>
				
				<h2>Alternate Flows</h2>
				
				<div th:each="s, row : ${useCase.mainFlow.steps}">

					<div th:each="f, fowf: ${s.alternates}">


						<span class="badge badge-warning" 
							th:text="'Alternate Flow - ' + ${row.count} + '.' + ${fowf.count}"></span>

						<div th:each="r, rowr : ${f.steps}">
							<span class="badge badge-info" th:text="${rowr.count}">4</span> <span
								th:text="${r.description}"></span>
						</div>

					</div>

				</div>


			</div>

			<div class="span3">
				<div id="toc"></div>
				<!--/.well -->
			</div>



		</div>
		<!--/row-->

		<hr />

		<footer>
			<p>&copy; Company 2013</p>
		</footer>



	</div>





	<!--/.fluid-container-->

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->

	<script src="js/bootstrap-transition.js"></script>
	<script src="js/bootstrap-alert.js"></script>
	<script src="js/bootstrap-modal.js"></script>
	<script src="js/bootstrap-dropdown.js"></script>
	<script src="js/bootstrap-scrollspy.js"></script>
	<script src="js/bootstrap-tab.js"></script>
	<script src="js/bootstrap-tooltip.js"></script>
	<script src="js/bootstrap-popover.js"></script>
	<script src="js/bootstrap-button.js"></script>
	<script src="js/bootstrap-collapse.js"></script>
	<script src="js/bootstrap-carousel.js"></script>
	<script src="js/bootstrap-typeahead.js"></script>

	<script src="js/jquery.tablecloth.js"></script>



	<script src="js/jquery-ui-1.9.1.custom.min.js"></script>
	<script src="js/jquery.tocify.js"></script>

	<script>
		$(function() {
			//Calls the tocify method on your HTML div.

			$("#toc").tocify();
		});
	</script>

</body>
</html>
